<template>
  <a-form
    ref="formRef"
    :model="form"
    :rules="rules"
    :label-col="{ style: { width: '130px' } }"
    :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
  >
    <a-row :gutter="8">
      <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="工单编号" name="taskNumber">
          <a-input v-model:value="form.taskNumber" placeholder="请输入工单编号" allow-clear autocomplete="off"
                  style="width: 90%;" disabled/>
        </a-form-item>
      </a-col>
     <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="工单名称" name="remarks">
          <a-input v-model:value="form.remarks" placeholder="请输入工单名称" allow-clear autocomplete="off"
                   style="width: 90%;"/>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="工单类型" name="taskType">
          <a-select
            ref="select"
            v-model:value="form.taskType"
            style="width: 90%"
            placeholder="请选择工单类型"
          >
            <a-select-option :value="0">普通工单</a-select-option>
            <a-select-option :value="1">紧急工单</a-select-option>
            <a-select-option :value="2">重要工单</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="工单状态" name="taskStatus">
          <a-select
            ref="select"
            v-model:value="form.taskStatus"
            style="width: 90%"
            placeholder="请选择工单状态"
            allow-clear
          >
            <a-select-option :value="0">待处理</a-select-option>
            <a-select-option :value="1">处理中</a-select-option>
            <a-select-option :value="2">已完成</a-select-option>
            <a-select-option :value="3">已关闭</a-select-option>
          </a-select>

        </a-form-item>
      </a-col>
       <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="优先级别" name="priority">
          <a-select
            ref="select"
            v-model:value="form.priority"
            style="width: 90%"
            placeholder="请选择优先级别"
          >
            <a-select-option :value="0">低</a-select-option>
            <a-select-option :value="1">中</a-select-option>
            <a-select-option :value="2">高</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24" :xs="24">
         <a-form-item label="提交人员" name="submitter">
           <a-input v-model:value="form.submitter"  style="width: 90%;" placeholder="请输入提交人员" allow-clear autocomplete="off" />
         </a-form-item>
       </a-col>
       <a-col :md="24" :sm="24" :xs="24">
         <a-form-item label="处理人员" name="processor">
           <a-input v-model:value="form.processor" style="width: 90%;" placeholder="请输入处理人员" allow-clear autocomplete="off" />
         </a-form-item>
       </a-col>
      <a-col :md="24" :sm="24" :xs="24">
        <a-form-item label="截止时间" name="deadline">
          <a-date-picker v-model:value="form.deadline" value-format="YYYY-MM-DD"  style="width: 90%;" placeholder="请输入截止时间" allow-clear autocomplete="off" />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24" :xs="24">
       <a-form-item label="工单描述" name="description">
         <a-textarea :rows="6" v-model:value="form.description" style="width: 90%;" placeholder="&nbsp;&nbsp;请输入工单描述" allow-clear autocomplete="off" />
       </a-form-item>
     </a-col>
    </a-row>
  </a-form>

</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
      import { OaTaskRequest } from '/@/api/oaTask/model/OaTaskModel.ts';


  const props = defineProps<{
    form: OaTaskRequest;
  }>();

  const rules = reactive({
        // 表单验证规则
        taskNumber: [{ required: false, message: '请输入工单编号', type: 'string', trigger: 'blur' }],
        remarks: [{ required: false, message: '请输入工单名称', type: 'string', trigger: 'blur' }],
        submitter: [{ required: false, message: '请输入提交人员', type: 'string', trigger: 'blur' }],
        processor: [{ required: true, message: '请输入处理人员', type: 'string', trigger: 'blur' }],
        deadline: [{ required: true, message: '请输入截止时间', type: 'date', trigger: 'blur' }],
        description: [{ required: false, message: '请输入工单描述', type: 'string', trigger: 'blur' }],

  })

</script>
